<!-- directive:title 项目使用页面中子级功能项tab样式 -->
<!-- directive:breadcrumb tab样式 -->
<div class="panel-body">
    <div class="row">
        <div class="col-sm-12">
            <h6><kbd>前言</kbd></h6>
            <article class="docs-content">
                <p>项目中使用的这个结构冗余 重写如下</p>
            </article>
            <h6><kbd>举例</kbd></h6>
            <ul class="pageTab">
                <li><a href class="active">能量排行榜</a></li>
                <li><a href="#/shortMessage/send_Message">能量设置</a></li>
                <div class="clear"></div>
            </ul>
            <h6><kbd>代码</kbd></h6>
            <style media="screen" ui-bs>
                .pageTab { margin-top: 30px; border-bottom: 2px solid #d1d7e2; display: flex; flex-direction: row; justify-content: start; align-items: center; }
                .pageTab li{ list-style: none; display: block;}
                .pageTab a,
                .pageTab a:hover { height: 35px; display: block; line-height: 35px; padding: 0 20px; font-size: 14px; color: #999; text-decoration: none; }
                .pageTab .active,
                .pageTab .active:hover { color:#333333; position: relative; font-weight: 600; }
                .pageTab .active:before {content:" "; width: 100%; height: 0; border-bottom: 2px solid #ea544a; position: absolute; bottom: -2px; left: 0; z-index: 1000; }
            </style>
            <script type="text/xianJs" ui-bs>
                <ul class="pageTab">
                    <li><a href class="active">能量排行榜</a></li>
                    <li><a href="#/shortMessage/send_Message">能量设置</a></li>
                    <div class="clear"></div>
                </ul>
            </script>
        </div>
    </div>
</div>
